<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>异步载入列表</title>
  <link rel="stylesheet" type="text/css" href="ext-all.css" />
  <script type="text/javascript" src="ext-all-dev.js"></script>
  <script type="text/javascript">
  	
  	//array载入
  	function fn1(){	     		  		
	    var store = Ext.create('Ext.data.Store', {
		    	data : [['Bill', 'Gardener', 12], []],
		    	//model : Ext.extend(Ext.data.Model, {fields: [{name: 'name'},{name: 'detail'},{name: 'age'}], idProperty: 'name'})
		    	model : Ext.extend(Ext.data.Model, {fields: ['name', 'detail', 'age'], idProperty: 'name'})
	    	}); 	    	    	    	    
	    	    
	    var grid = Ext.create('Ext.grid.Panel', {
	    	renderTo : 'datatable',
	    	store : store,	        
	    	columns : [
	    		{text:'名字', dataIndex:'name'},
	    		{text:'备注', dataIndex:'detail'},
	    		{text:'年龄', dataIndex:'age'}
	    	] 
	    });	    		       	    
  	}
  	
  	//json载入
  	function fn2(){
	    var store = Ext.create('Ext.data.Store', {
		    	data : [{name:'Bill', detail:'Gardener', age:12}, {}],
		    	model : Ext.extend(Ext.data.Model, {fields: ['name', 'detail', 'age'], idProperty: 'name'})
	    	}); 	    	    	    	    
	    	    
	    var grid = Ext.create('Ext.grid.Panel', {
	    	renderTo : 'datatable',
	    	store : store,	        
	    	columns : [
	    		{text:'名字', dataIndex:'name'},
	    		{text:'备注', dataIndex:'detail'},
	    		{text:'年龄', dataIndex:'age'}
	    	] 
	    });  		
  	}
  	
  	//json远程文件载入
  	function fn3(){	    
		var store = new Ext.data.Store({	
			autoLoad: true,	    
			model: Ext.extend(
				Ext.data.Model, {
					fields: [
					{name: 'firstName', type: 'string'},
					{name: 'lastName',  type: 'string'},
					{name: 'age',       type: 'int'},
					{name: 'eyeColor',  type: 'string'}
					], 
					idProperty: 'name'
				}
			),			
			proxy: {
				type: 'ajax',
				url: 'users.json',
				reader: {
					 type: 'json',
					 root: 'users'
				}
			}			
		});  	
		
	    var grid = Ext.create('Ext.grid.Panel', {
	    	renderTo : 'datatable',
	    	store : store,	        
	    	columns : [
	    		{text:'姓', dataIndex:'firstName'},
	    		{text:'名', dataIndex:'lastName'},
	    		{text:'年龄', dataIndex:'age'},
	    		{text:'眼睛颜色', dataIndex:'eyeColor'}
	    	] 
	    });				    
  	}
  	
  	//多效果载入
  	function fn4(){	    	 
		Ext.Msg.alert('warn', 'building');
  	}
  </script>
</head>
<body>
  <input type="button" value="array载入" onclick="fn1()">
  <input type="button" value="json载入" onclick="fn2()">
  <input type="button" value="json远程文件载入" onclick="fn3()">
  <input type="button" value="多效果载入" onclick="fn4()">
  <div id="datatable"></div>
</body>
</html>
